---
title: Örnekler
description: Ultracite’in çalışırkenki öncesi ve sonrası örnekleri.
---

To illustrate Ultracite’s capabilities, here are a few practical examples of issues it catches and fixes. Each example shows code before (with a problem) and after Ultracite is applied. These examples demonstrate how Ultracite improves code automatically.

## Automatic Code Formatting

### Before (messy formatting)

```tsx title="page.tsx"
function greet(name) { return 'Hello, '+ name + "!!" }
```

In this code, spacing and concatenation style are off. It’s also using string concatenation instead of template literals, and has double quotes mixed with single quotes.

### After (formatted)

```tsx title="page.tsx"
function greet(name) {
  return `Hello, ${name}!!`;
}
```

Ultracite's formatter has:

- Formatted the function with proper line breaks for readability.
- Converted the string concatenation into a template literal (this could be an automatic fix from a lint rule suggesting template strings for readability).
- Standardized quotes to backticks for the template (and would use double quotes consistently elsewhere if not a template).
- Added a semicolon at the end of the `return` statement.
- Ensured proper spacing around braces and parentheses.

The developer didn’t manually reformat the code – they just saved the file, and Ultracite handled the rest. The result is cleaner, more consistent code.

Ultracite will also warn that `name` is untyped and will suggest adding a type.

## Enforcing Strict Equality

### Before (potential bug with loose equality)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}
```

Here, the code is using loose equality (`==`) to compare `response.status` to `200`. Using loose equality can be error-prone due to type coercion (e.g., `response.status` could be a string `“200”` and still pass). Ultracite’s strict rules likely enforce using `===` for comparisons.

### After (Ultracite auto-fix applied)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status === 200) { // [!code highlight]
  isValid = true;
}
```

Ultracite automatically replaced `== 200` with `=== 200`. This small change prevents subtle bugs. The fix was applied on save as part of the `source.fixAll.biome` actions. Such a rule (similar to ESLint’s `eqeqeq`) ensures developers use strict equality checking.

Additionally, Ultracite will also warn that `isValid` is never used, and will suggest removing it.

## Organizing and Cleaning Imports

### Before (unorganized imports)

```tsx title="index.tsx"
import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

The imports here are out of alphabetical order, and the helper import is never used in the file.

### After (after save with Ultracite)

```tsx title="index.tsx"
import React from 'react'; // [!code highlight]
import A from './a-module'; // [!code highlight]
import Z from './z-module'; // [!code highlight]
import { helper } from './util'; // [!code --]

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Ultracite (via Biome’s organize imports feature) sorted the imports alphabetically by module name. It also removed the unused helper import automatically. The before/after difference happens immediately on save, ensuring that your imports section is always tidy:

- No unused imports cluttering the top of your file.
- Deterministic ordering of imports (so merges and diffs don’t get confused by different import orders added by different developers).

This leads to more maintainable code, especially in files with many imports.

## Accessibility Fix

### Before

```tsx title="Button.tsx"
<button onClick={submitForm}>
  Open modal
</button>
```

The default type of a button is `submit`, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application. Ultracite will warn you about this and offer a quick fix to change the type to `button`.

### After (manual or quick fix)

```tsx title="Button.tsx"
<button onClick={submitForm} type="button">
  Open modal
</button>
```

The type is now `button`, which prevents a potential parent form from being submitted when the button is clicked.

---

These examples demonstrate how Ultracite improves code quality:

- Formatting and style consistency with no effort.
- Automatic fixes for many common issues (so you rarely have to fix trivial things by hand).
- Identification of real problems (so you can fix them early in development).

By using Ultracite, your code not only stays clean but also less buggy and more accessible, thanks to the collective knowledge encoded in its rules.